<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
    <link rel="stylesheet" href="d3-tip.css">
    <style>
        *{
            margin:0;
            padding: 0;
        }
        body{
            padding-left:100px;
        }
        .box{
            position: absolute;
            left:100px;
            top: 100px;
            width: 600px;
            height: 600px;
            border:1px solid #ccc;
        }
    </style>
</head>
<body>
    <text dominant-baseline=""></text>
    <script src="d3.min.js"></script>
    <!-- <script src="https://d3js.org/d3.v7.min.js"></script> -->
    <script src="d3-tip.js"></script>
    <script>
        const width = 800 ;
        const height = 600 ;
        const margin = 50 ;

        const svg = d3.select('body').append('svg');
        svg.attr('width',width);
        svg.attr('height',height);
        svg.style('border','2px solid #ccc');

        const tip = d3.tip()
            .attr('class','d3-tip')
            .html((e,d)=>d.year+":"+d.value);

        svg.call(tip);    

        const data = [
            {year:'2010',value:100},
            {year:'2011',value:150},
            {year:'2012',value:200},
            {year:'2013',value:220},
            {year:'2014',value:170},
            {year:'2015',value:190},
            {year:'2016',value:80},
            {year:'2017',value:320},
            {year:'2018',value:280},
            {year:'2019',value:130},
            {year:'2020',value:180},
            {year:'2021',value:240},
            {year:'2022',value:70},
            {year:'2023',value:300}
        ]

       
        const years = data.map(d=>d.year);

        const xScale = d3.scaleBand()
            .domain(years)
            .range([margin,width-margin])
            .padding(0.2)

        const colorScale = d3.scaleOrdinal()
            .domain(years)
            .range(d3.schemeSet3)
            
        const yScale = d3.scaleLinear()
            .domain([0,d3.max(data,d=>d.value)])
            .range([height-margin,margin])    

        const xAxis = d3.axisBottom(xScale);
        const gx = svg.append('g')
            .attr('transform',`translate(0,${height-margin})`) 
        gx.call(xAxis);     

        const g = svg.append('g')
            .attr('transform',`translate(0,0)`) ;
        const rects = g.selectAll('rect')
            .data(data)
            .join('rect')
            .attr('x',d=>xScale(d.year))
            .attr('y',yScale(0))
            .attr('width',xScale.bandwidth())
            .attr('height',0)
            .attr('fill',d=>colorScale(d.year))
            .on('mouseover',function(d){
                d3.select(this).attr('stroke',colorScale(d))
                d3.select(this).attr('stroke-width',2);
                tip.show
            })
            .on('mouseout',function(){
                tip.hide
                d3.select(this).attr('stroke','none');
            })
        
        let time = rects.size() ;    
        rects.transition()
            .delay((d,i)=>200*i)
            .duration(1000)
            .attr('y',d=>yScale(0)-yScale(d.value))
            .attr('height',d=>yScale(d.value))
            .on('end',function(){
                time-- ;
            })

        const yAxis = d3.axisLeft(yScale);
        const gy = svg.append('g')
            .attr('transform',`translate(${margin},0)`)        
        gy.call(yAxis);


        svg.append('text')
            .attr('x',width/2)
            .attr('y',margin)
            .text('2020-至今 年营业额(万元)')
            .attr('font-size',20)
            .attr('text-anchor','middle')
            .attr('dominant-baseline','middle')

        //放缩
        const zoom = d3.zoom()
            .scaleExtent([1,3])
            .translateExtent([[margin,0],[width,0]])
            .extent([[margin,0],[width,0]])
            .on('zoom',e=>{
                if(time != 0)
                    return ;
                xScale.range([margin,width-margin].map(d=>e.transform.applyX(d)));
                // rects.
                //     transition()
                //     .duration(1000)
                //     .attr('x',d=>xScale(d.year))
                //      .attr('width',xScale.bandwidth())
                gx. transition()
                    .duration(1000).call(xAxis)
            })

        svg.call(zoom);    
    </script>
</body>
</html>